<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/jsp/taglib.jsp" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色设置</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctxStatic}/plugins/h+/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/resources/plugins/h+/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/style.min862f.css?v=4.1.0" rel="stylesheet">


    <style>
        .jstree-open > .jstree-anchor > .fa-folder:before {
            content: "\f07c"
        }

        .jstree-default .jstree-icon.none {
            width: 0
        }

        .mask {
            position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
            z-index: 1002; left: 0px;
            opacity:0.5; -moz-opacity:0.5;
        }
    </style>
</head>

<body class="gray-bg">


<div class="wrapper wrapper-content  animated fadeInRight">

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <strong>角色配置</strong> 对使用系统的不同用户进行角色分配和设置，不同的用户可以访问的菜单权限不同，这里的角色设置只能配置<strong>【系统分组】</strong>的角色，<strong>【其他分组】</strong>的角色是自动生成的无法配置
                    <br>请点击下方的列表进行操作
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>角色列表
                        <small>点击配置角色拥有的菜单权限</small>
                    </h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <!--工具栏 -->
                <div class="ibox-content" style="padding: 0px;padding-left: 14px;border-width: 0px;">
                    <button type="button" class="btn btn-primary btn-xs" id="role_add">添加</button>
                    <button type="button" class="btn btn-primary btn-xs" id="role_edit">编辑</button>
                    <button type="button" class="btn btn-danger btn-xs" id="role_del">删除</button>
                    &nbsp;&nbsp;
                    <button type="button" class="btn btn-info btn-xs" id="role_button">按钮权限配置</button>

                </div>
                <!--jstree部分 -->
                <div class="ibox-content">
                    <div id="roleJson">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>配置角色菜单</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <!--工具栏 -->
                <div class="ibox-content" style="padding: 0px;padding-left: 14px;border-width: 0px;">
                    <button type="button" class="btn btn-primary btn-xs" id="menu_selectAll">全选</button>
                    <button type="button" class="btn btn-primary btn-xs" id="menu_empty">清空</button>
                    <button type="button" class="btn btn-danger btn-xs" id="menu_save">保存</button>
                </div>
                <!--jstree部分 -->
                <div id="menuDivPar" class="ibox-content">
                    <div id="menujson">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="mask" class="mask"></div>

<script src="${ctxStatic}/plugins/h+/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctxStatic}/plugins/h+/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${ctxStatic}/plugins/h+/js/content.min.js?v=1.0.0"></script>
<script src="${pageContext.request.contextPath}/resources/plugins/h+/js/plugins/jsTree/jstree.js"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/layer2.4/layer.js"></script>
<script src="${pageContext.request.contextPath}/resources/plugins/h+/js/plugins/jsTree/CheckboxTree.js"></script>

<style>
    .jstree-open > .jstree-anchor > .fa-folder:before {
        content: "\f07c"
    }

    .jstree-default .jstree-icon.none {
        width: 0
    }
</style>

<script>

    /**初始化方法*/
    $(function () {
        loadRoles();
    });


    /**当前选中的角色树ID*/
    var nowSelectRoleNode="";


    /**加载角色*/
    function loadRoles() {
        $.ajax({
            url: '${pageContext.request.contextPath}/role/getAllRoleList.ac',// 跳转到 action
            data: {},
            type: 'post',
            cache: false,
            dataType: 'json',
            success: function (data) {
                roleTreeInit(data);
            },
            error: function () {
                parent.layer.msg('加载角色列表失败！');
            }
        });
    }


    /**加载角色*/
    function loadMenus(roleid) {
        $.ajax({
            url: '${pageContext.request.contextPath}/role/getMenuByRole.ac?prole.id='+roleid,
            data: {},
            type: 'post',
            cache: false,
            dataType: 'json',
            success: function (data) {
                menuTreeInit(data);
            },
            error: function () {
                parent.layer.msg('加载角色列表失败！');
            }
        });
    }


    /**角色树数据加载*/
    function roleTreeInit(data) {
        $("#roleJson").jstree({
            'ui': {
                'select_parent_open': 'true',
                'selected_parent_close': 'select_parent'
            },
            'core': {
                "check_callback": true,
                "data": data
            },
            'themes': {
                'responsive': false,
                'icons': true,
                'dots	': false
            },
            "plugins": ["types", "dnd"],
            "types": {
                "default": {
                    draggable: false, //设置节点不可拖拽
                    "icon": "fa fa-user"
                }
            }
        }).bind('click.jstree', function (event) {
            nowSelectRoleNode = $(event.target).parents('li').attr('id');
            //根据role角色ID加载菜单
            $("#menuDivPar").empty();
            $("#menuDivPar").html("<div id='menujson'></div>");
            loadMenus(nowSelectRoleNode);
        });
    }


    /**菜单树数据加载*/
    function menuTreeInit(data) {
        $("#menujson").jstree({
            'ui': {
                'select_parent_open': 'true',
                'selected_parent_close': 'select_parent',
            },
            'core': {
                "check_callback": true,
                "data": data
            },
            'themes': {
                'responsive': false,
                'icons': true,
                'dots	': false
            },
            "checkbox" : {
                "keep_selected_style" : true
            },
            "plugins": ["types", "dnd","checkbox"],
            "types": {
                "default": {
                    draggable: false, //设置节点不可拖拽
                    "icon": "fa fa-sun-o"
                }
            }
        }).bind('click.jstree', function (event) {
            var nowSelectMenu = $(event.target).parents('li').attr('id');
            //选中当前的menu

        });
    }


    /**刷新角色树*/
    function refreshRoleTree(){
        $.ajax({
            url: '${pageContext.request.contextPath}/role/getAllRoleList.ac',// 跳转到 action
            data: {},
            type: 'post',
            cache: false,
            dataType: 'json',
            success: function (data) {
                $("#roleJson").jstree().settings.core.data = data;
                $("#roleJson").jstree().refresh(true);
            },
            error: function () {
                parent.layer.msg('刷新菜单列表失败！');
            }
        });
    }


    /**刷新菜单树*/
    function refreshMenuTree(roleid){
        $.ajax({
            url: '${pageContext.request.contextPath}/role/getMenuByRole.ac?prole.id='+roleid,
            data: {},
            type: 'post',
            cache: false,
            dataType: 'json',
            success: function (data) {
                $("#menujson").jstree().settings.core.data = data;
                $("#menujson").jstree().refresh(true);
            },
            error: function () {
                parent.layer.msg('刷新角色列表失败！');
            }
        });
    }


    /*******************************************************工具栏*******************************************************/
    /**新增按钮事件*/
    $("#role_add").click(function(){
        showPopupRole();
    });

    /**编辑按钮事件*/
    $("#role_edit").click(function(){
        if(nowSelectRoleNode == null || nowSelectRoleNode == undefined || nowSelectRoleNode == ''){
            parent.layer.msg('请先选择需要编辑的角色！');
        }else{
            showPopupRoleEdit(nowSelectRoleNode);
        }
    })

    /**删除按钮事件*/
    $("#role_del").click(function(){
        if(nowSelectRoleNode == null || nowSelectRoleNode == undefined || nowSelectRoleNode == ''){
            parent.layer.msg('请先选择需要删除的角色！');
        }else{
            parent.layer.confirm('确认删除角色吗？', {
                btn: ['确认','取消'] //按钮
            }, function(){
                delRole(nowSelectRoleNode);
            }, function(){

            });
        }
    })

    /**角色按钮权限配置事件*/
    $("#role_button").click(function(){
        if(nowSelectRoleNode == null || nowSelectRoleNode == undefined || nowSelectRoleNode == ''){
            parent.layer.msg('请先选择需要配置按钮权限的角色！');
        }else{
            showPopupRoleButton(nowSelectRoleNode);
        }
    })


    /**全选按钮事件*/
    $("#menu_selectAll").click(function(){
        $('#menujson').jstree('select_all');
    })


    /**取消全选按钮事件*/
    $("#menu_empty").click(function(){
        $('#menujson').jstree('deselect_all');
    })


    /**保存按钮事件*/
    $("#menu_save").click(function(){
        var loadindex = layer.load(1, {shade: [0.5,'#fff']});
        var selectNode = $('#menujson').jstree('get_selected');

        $.ajax({
            url: '${pageContext.request.contextPath}/role/updateRoleMenu.ac?prole.id='+nowSelectRoleNode+'&prole.menu_id='+selectNode,
            data: {},
            type: 'post',
            cache: false,
            dataType: 'json',
            success: function (data) {
                if(data=="success"){
                    parent.layer.msg('保存成功');
                    layer.close(loadindex);
                }else{
                    parent.layer.msg(data);
                    layer.close(loadindex);
                }
            },
            error: function () {
                parent.layer.msg('更新菜单权限失败！');
                layer.close(loadindex);
            }
        });


    })



    /**角色新增弹框*/
    function showPopupRole(){
        //自定页
        parent.layer.open({
            title: '角色新增',
            type: 2,
            shift: 2,//动画类型
            moveType:1,
            maxmin: true,
            shadeClose: true, //开启遮罩关闭
            area: ['550px', '510px'],
            content: '${pageContext.request.contextPath}/jsp/sys/role/role_add.jsp',
            success: function(layero, index){

            },
            cancel: function(index){

            },
            close: function(index){

            },
            end: function () {
                refreshRoleTree();
            }
        });
    }


    /**角色编辑弹框*/
    function showPopupRoleEdit(id){
        //自定页
        parent.layer.open({
            title: '角色修改',
            type: 2,
            shift: 2,//动画类型
            moveType:1,
            maxmin: true,
            shadeClose: true, //开启遮罩关闭
            area: ['550px', '510px'],
            content: '${pageContext.request.contextPath}/role/toUpdateRole.ac?prole.id='+id,
            success: function(layero, index){

            },
            cancel: function(index){

            },
            close: function(index){

            },
            end: function () {
                refreshRoleTree();
            }
        });
    }


    /**角色删除操作*/
    function delRole(id){
        $.ajax({
            url: '${pageContext.request.contextPath}/role/delRole.ac?prole.id='+id,
            data: {},
            type: 'post',
            cache: false,
            dataType: 'json',
            success: function (data) {
                if(data=="success")
                {
                    parent.layer.msg('删除角色成功');
                    //置空刚刚删除的id
                    nowSelectRoleNode="";
                    refreshRoleTree();
                }else{
                    parent.layer.msg(data);
                }
            },
            error: function () {
                parent.layer.msg('删除角色列表失败！');
            }
        });
    }


    /**角色按钮权限配置弹框*/
    function showPopupRoleButton(id){
        //自定页
        parent.layer.open({
            title: '角色按钮权限配置',
            type: 2,
            shift: 2,//动画类型
            moveType:1,
            maxmin: true,
            shadeClose: true, //开启遮罩关闭
            area: ['550px', '600px'],
            content: '${pageContext.request.contextPath}/role/toChangeRoleButton.ac?prole.id='+id,
            success: function(layero, index){

            },
            cancel: function(index){

            },
            close: function(index){

            },
            end: function () {

            }
        });
    }







    //显示遮罩层
    function showMask(){
        $("#mask").css("height",$(document).height());
        $("#mask").css("width",$(document).width());
        $("#mask").show();
    }


    //隐藏遮罩层
    function hideMask(){
        $("#mask").hide();
    }

</script>
</body>

</html>